
<!DOCTYPE HTML>
<html>
<head>
<title>读取并修改元素的属性</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/4_1.css" />
<style>.foreground { z-index: 1; }</style>

</head>
<body>
	<h2>实现多标签页效果</h2>
	<div id="father">
		<ul id="tab">
			<li id="tab1">10元套餐</li>
			<li id="tab2">30元套餐</li>
			<li id="tab3">50元包月</li>
		</ul>
		<div id="container">
			<div id="content1" style="z-index: 1;">
				10元套餐详情：<br />&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟
			</div>
			<div id="content2">
				30元套餐详情：<br />&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟
			</div>
			<div id="content3">
				50元包月详情：<br />&nbsp;每月无限量随心打
			</div>
		</div>
	</div>
	
	
</body>
<script type="text/javascript">
	var lis=document.getElementsByTagName("li");
	var contentone=parseInt(content1.innerText);
	var contenttwo=parseInt(content2.innerText);
	var contentthree=parseInt(content3.innerText);
	console.log(contentone,contenttwo,contentthree);
	for(var i=0;i<lis.length;i++){
		lis[i].onclick=function(){
			switch(parseInt(this.innerText)){
				case 10:
				content1.style.zIndex="1";
				content2.style.zIndex="0";
				content3.style.zIndex="0";
				break;
				case 30:
				content2.style.zIndex="1";
				content1.style.zIndex="0";
				content3.style.zIndex="0";
				break;
				case 50:
				content3.style.zIndex="1";
				content1.style.zIndex="0";
				content2.style.zIndex="0";
				break;
			}
		}
	}
	parseInt(tab1.innerText);
</script>
</html>
